<template>
  <v-container>
    <!-- 标题 -->
    <v-row class="green mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation=0 fab outlined x-small color="white">
          <!-- 粗箭头 -->
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
          <!-- 细箭头 -->
          <!-- <v-icon>keyboard_backspace</v-icon> -->
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">绿 色 商 城</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    <!-- 轮播图 -->
    <v-container>
    <v-row>
      <v-carousel cycle interval="3000" height="250" hide-delimiter-background show-arrows-on-hover>
        <v-carousel-item contain class="mx-auto" v-for="(lunbo,i) in lunbos" :key="i" :src="lunbo.src" transition="fade-transition">
        </v-carousel-item>
      </v-carousel>
    </v-row>
    </v-container>
    <!-- 智能推荐 -->
    <v-row class="pt-4 mb-n2 px-3">
      <v-text-field label="搜索" solo clearable prepend-inner-icon="mdi-magnify" append-icon="check"></v-text-field>
    </v-row>
    <!-- <v-row class="py-6 px-5 font-italic">智能推荐 >>></v-row> -->
    <v-row dense>
      <v-col cols="6">
        <v-card flat :to="{name:'MeatyPlant'}">
          <v-img
            src="../assets/智能推荐多肉植物.jpg"
            height="170px"
            contain
          >
          </v-img>
          <div id="div1" class="pt-2 px-3" style="height:52px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
            【小鲜肉】多肉植物盆栽组合新手套餐肉肉植物办公室内花卉绿植盆栽
          </div>
          <div id="div2" class="pt-2 px-3">
            50积分 + ￥5.5
            </div>
          <div id="div3" class="py-2 px-3" style="text-decoration:line-through">
            6
          </div>
        </v-card>
      </v-col>

      <v-col cols="6">
        <v-card flat :to="{name:'Details'}">
          <v-img
            src="../assets/智能推荐手机.jpg"
            height="170px"
            contain
          >
          </v-img>
          <div id="div1" class="pt-2 px-3" style="height:52px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
            华为 HUAWEI Mate 30 5G 麒麟990 4000万超感光徕卡影像双超级快充8GB+128GB星河银5G全网通游戏手机
          </div>
          <div id="div2" class="pt-2 px-3">
            3900积分 + ￥4460
            </div>
          <div id="div3" class="py-2 px-3" style="text-decoration:line-through">
            4499
          </div>
        </v-card>
      </v-col>
      <!-- 循环显示 -->
      <v-col
        v-for="card in cards"
        :key="card.id"
        :cols="card.flex"
      >
        <!-- <v-card flat hover :to="{name:'Details'}"> -->   <!-- 有bug -->
        <v-card flat>
          <!-- gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" img参数，图像渐变，视觉效果会暗一点 -->
          <v-img
            :src="card.src"
            height="170px"
            contain
          >
          </v-img>
          <div id="div1" class="pt-2 px-3" v-text="card.title" style="height:52px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;"></div>
          <div id="div2" class="pt-2 px-3" v-text="card.integral+'积分 + ￥'+card.pricenow"></div>
          <div id="div3" class="py-2 px-3" v-text="card.price" style="text-decoration:line-through"></div>
        </v-card>
      </v-col>
    </v-row>

    <!-- 去掉底部Banner的遮挡 -->
    <v-row>
      <span style="display:inline-block;width:100%;height:44px;"></span>
    </v-row>
      
    <v-bottom-navigation style="position:fixed;" :value="activeBtn" grow color="teal">
      <v-btn :to="{name:'Mall'}" bottom>
        <span>首页</span>
        <v-icon>home</v-icon>
      </v-btn>
      <v-btn :to="{name:'Classify'}">
        <span>分类</span>
        <v-icon>widgets</v-icon>
      </v-btn>
      <v-btn :to="{name:'Myself'}">
        <span>我的</span>
        <v-icon>person</v-icon>
      </v-btn>
    </v-bottom-navigation>

  </v-container>
</template>

<script>
export default {
  data () {
    return {
      activeBtn: 0,
      cards: [
        {id:2, title:'荣耀原装三键线控带麦半入耳式耳机AM116(尊爵版)适用于华为荣耀手机 ', src:require('../assets/智能推荐1.jpg'), flex:6, integral:200, pricenow:67, price:69},
        {id:3, title:'漫步者（EDIFIER）TWS1 真无线蓝牙耳机 迷你隐形运动手机耳机 通用苹果华为小米手机 黑色 ', src:require('../assets/智能推荐2.jpg'), flex:6, integral:300, pricenow:215, price:218},
        {id:5, title:'清风抽纸 柔韧2层200抽软抽*20包纸巾', src:require('../assets/智能推荐3.jpg'), flex:6, integral:100, pricenow:39, price:40},
        {id:6, title:'洁丽雅（Grace）毛巾家纺 经典格纹系列纯棉强吸水面巾 二条装 兰/灰 72*34cm ', src:require('../assets/智能推荐4.jpg'), flex:6, integral:50, pricenow:24.5, price:25},
        {id:1, title:'欧润哲 垃圾桶家用 5升缓降静音 干湿环保分类脚踏客厅厨房圆形垃圾桶 米白色', src:require('../assets/智能推荐5.jpg'), flex:6, integral:100, pricenow:49, price:50},
        {id:4, title:'空调扇制冷小空调迷你冷风机台式USB小风扇桌面电风扇 办公室学生宿舍创意加水制冷电扇 新款空调扇（升级版）', src:require('../assets/智能推荐6.jpg'), flex:6, integral:150, pricenow:108.5, price:110},
      ],
      lunbos:[
        {src: require('../assets/轮播图1.jpg')},
        {src: require('../assets/轮播图2.jpg')},
        {src: require('../assets/轮播图3.jpg')},
      ],
    }
  },
}
</script>

<style scoped>
</style>